<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form-model
        ref="formModel"
        :model="form"
        layout="inline"
        :rules="{
          name: [
            {
              validator: validators.noWhitespace(),
              trigger: 'change',
            },
            {
              validator: validators.noIllegalString(),
              trigger: 'change',
            },
            {
              max: 10,
              message: '长度在 1 到 10 个字符',
              trigger: 'change',
            },
          ],
        }"
      >
        <a-row :gutter="[16, 16]" type="flex" justify="end">
          <a-col :md="6" :sm="8">
            <a-form-model-item prop="name" label="应用名">
              <a-input autocomplete="off" v-model="form.name" />
            </a-form-model-item>
          </a-col>

          <span
            style="float: left; overflow: hidden"
            class="table-page-search-submitButtons"
          >
            <a-col :md="12" :sm="24">
              <a-button type="primary" @click="loadData(true)" icon="search">
                查询
              </a-button>
              <a-button
                @click="resetSearchForm"
                icon="reload"
                style="margin-left: 8px"
              >
                重置
              </a-button>
            </a-col>
          </span>
        </a-row>
      </a-form-model>
    </div>

    <a-table
      ref="table"
      rowKey="id"
      size="middle"
      :columns="columns"
      :dataSource="gDataSource"
      :pagination="gPagination"
      @change="gHandleTableChange"
    >
      <span slot="sortCol" slot-scope="text, record, index">
        {{
          (gPagination.current - 1) * gPagination.pageSize + parseInt(index) + 1
        }}
      </span>
      <span slot="datacenterName" slot-scope="text, record">
        {{ text }}
        <a-tooltip title="数据中心评分">
          <a-button
            type="primary"
            size="small"
            @click="handleDatabaseModal(record)"
          >
            <img
              style="padding-bottom: 4px"
              src="@/assets/f030303_datacenter.svg"
            />
          </a-button>
        </a-tooltip>
      </span>
      <span slot="totalScore" slot-scope="text">
        <a-progress
          status="active"
          :percent="text"
          :format="(percent) => `${percent}`"
          :stroke-color="
            text < 60 ? '#b93b04' : text < 80 ? '#ffb400' : '#089b04'
          "
        />
      </span>
      <span slot="action" slot-scope="text, record">
        <a-button
          type="primary"
          icon="profile"
          size="small"
          @click="handleDetail(record)"
        >
          查看评分
        </a-button>
        <a-divider type="vertical" />
        <!-- <a-button
          type="primary"
          icon="profile"
          size="small"
          @click="handleDatabaseModal(record)"
        >
          数据中心评分
        </a-button> -->
      </span>
    </a-table>
    <detail-modal ref="detailModal" @ok="loadData"></detail-modal>

    <DatabaseModal ref="databaseModal" @ok="loadData"></DatabaseModal>
  </a-card>
</template>

<script>
import { GwListMixin } from "@/mixins/GwListMixin";
import { gPostAction } from "@/api/manage";
import DetailModal from "./DetailModal";
import DatabaseModal from "./DatabaseModal";
import EditModelFactors from "@comp/gw/EditModelFactors";

export default {
  name: "Evaluation",
  mixins: [GwListMixin],
  components: {
    DatabaseModal,
    DetailModal,
    EditModelFactors,
  },
  data() {
    return {
      // 表头
      columns: [
        {
          title: "序号",
          dataIndex: "",
          key: "rowIndex",
          width: 50,
          scopedSlots: {
            customRender: "sortCol",
          },
        },
        {
          title: "数据中心",
          dataIndex: "datacenterName",
          scopedSlots: {
            customRender: "datacenterName",
          },
        },
        {
          title: "应用名",
          dataIndex: "name",
        },
        {
          title: "应用评分",
          width: "19%",
          dataIndex: "totalScore",
          scopedSlots: { customRender: "totalScore" },
        },
        {
          title: "操作",
          width: "14%",
          dataIndex: "action",
          scopedSlots: {
            customRender: "action",
          },
        },
      ],
      datacenterList: [],
      url: {
        list: "/model/pageAppModelScore",
        datacenterList: "/asset/pageDatacenter",
      },
      form: {
        name: "",
        datacenterId: "",
      },
      activeKey: "1",
    };
  },
  mounted() {
    this.loadDatacenter();
    this.loadData();
  },
  methods: {
    loadData(isDoSearch) {
      this.$refs.formModel.validate((error) => {
        if (!error) {
          return;
        }
        this.gQueryParam.deviceName = this.form.name;
        this.gQueryParam.datacenterId = "";
        this.gQueryParam.title =
          "精确管控与供电制冷联动-统一管理联动平台-最优成本代价模型-最优成本代价模型列表";
        this.gQueryParam.content = "查询最优成本代价模型列表";
        if (this.form.datacenterId) {
          this.gQueryParam.datacenterId = this.form.datacenterId;
        }
        this.gQueryParam.modelType = "APP";
        if (isDoSearch) {
          this.gQueryParam.pageNo = 1;
          this.gPagination.current = 1;
        }
        gPostAction(this.url.list, this.gQueryParam).then((res) => {
          const data = res.data;
          if (data && data.list) {
            this.gDataSource = data.list;
            this.gPagination.total = data.totalCount;
          }
        });
      });
    },
    loadDatacenter() {
      gPostAction(this.url.datacenterList, {}).then((res) => {
        const data = res.data;
        if (data && data.list) {
          this.datacenterList = data.list;
          this.datacenterList.unshift({
            id: "",
            name: "全部",
          });
        }
      });
    },
    handleDetail(data) {
      this.$refs.detailModal.showModal(data);
    },
    handleDatabaseModal(data) {
      this.$refs.databaseModal.showModal(data);
    },
    resetSearchForm() {
      this.form.name = "";
      this.form.datacenterId = "";
      this.$refs.formModel.resetFields();
    },
    handleTabsChange(e) {
      if (e === "1") {
        this.resetSearchForm();
        this.loadData();
      }
    },
  },
};
</script>